<!--
 * @Description:
 * @Author: //联系微信：nn7334n 搭建
 * @Date: 2023-08-16 09:16:28
 * @LastEditor: //联系微信：nn7334n 搭建
 * @LastEditTime: 2023-12-08 15:42:35
 * @Copyright: by //联系微信：nn7334n 搭建
-->


<template>
	<view class="CustomPayment">
		<view class="mask" :class="{ show }" @click="$emit('close', false)"></view>
		<view class="popup" :class="{ show }">
			<view class="list">
				<view class="item" v-for="(item, index) in payment" :key="'pay_' + index" @click="selectHandle(item.type)">
					<image class="image" :src="item.logo" mode="heightFix"></image>
					<text class="text">{{ item.name }}</text>
				</view>
				<view class="item" @click="$emit('close', false)">
					<text class="text">{{ $t('text.cancel') }}</text>
				</view>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		name: "CustomPayment",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: ""
			},
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				pay: ""
			}
		},
		computed: {
			...mapGetters("user", ["token"]),
			...mapGetters("app", ["payment"])
		},
		created() {
			
		},
		methods: {
			// 选择支付方式
			selectHandle(pay) {
				this.$emit('close', false)
				if (!this.token) return this.$u.toast(this.$t('toast.not.login'))
				this.pay = pay
				this.createOrder()
				uni.showLoading({
					// title: "加载中..."
					// mask: true
				})
			},
			// 创建订单
			createOrder() {
				const { id, price } = this.data
				const platform = this.$utils.platforms()
				if(this.type == 'integral') {
					this.$request('integral.create', {
						usable_id: id,
						total_fee: price,
						platform
					}).then(res => {
						if (res.code === 1) {
							this.pullupPay(res.data.order_sn, this.pay, res.data.platform)
						}
					})
				} else if(this.type == 'member') {
					this.$request('member.create', {
						vip_id: id,
						total_fee: price,
						platform
					}).then(res => {
						if (res.code === 1) {
							this.pullupPay(res.data.order_sn, this.pay, res.data.platform)
						}
					})
				} else if(this.type == 'dealer') {
					this.$request('dealer.create', {
						reseller_id: id,
						total_fee: price,
						platform
					}).then(res => {
						if (res.code === 1) {
							this.pullupPay(res.data.order_sn, this.pay, res.data.platform)
						}
					})
				}
			},
			// 拉起支付
			pullupPay(order_sn, payment, platform) {
				if(payment === 'paypal' || payment === 'stripe') {
					this.$request('pay.paypal', {
						order_sn,
						payment,
						platform,
						cancel_url: platform == 'H5' ? this.$utils.currentPath() : '',
						return_url: platform == 'H5' ? this.$utils.currentPath() : ''
					}).then(res => {
						if(res.code === 1) {
							// #ifdef H5
							if(payment === 'paypal') {
								window.location.href = res.data.pay_data.links[1].href
							} else {
								window.location.href = res.data.pay_data.url
							}
							// #endif
							
							// #ifdef APP-PLUS
							this.paypalApp(payment, res.data.pay_data)
							// #endif
						}
						setTimeout(() => {
							uni.hideLoading()
						}, 3000)
					})
				}
			},
			// app支付
			paypalApp(payment, data) {
				// #ifdef APP-PLUS
				let orderInfo = {}
				if(payment === 'paypal') {
					const { clientId, orderId, userAction, currency, environment } = data
					orderInfo = {
						clientId, // 客户端id
						orderId, // 订单id
						userAction, // 按钮 paynow(立即付款) / continue(继续)
						currency, // 币种
						environment // 运行环境 sandbox / live
					}
				} else if(payment === 'stripe') {
					const { paymentIntent, publishKey, customer, ephemeralKey } = data
					orderInfo = {
						merchantName: "DCloud",
						paymentIntent,
						publishKey,
						customer,
						ephemeralKey
					}
				}

				uni.getProvider({
					service: 'payment',
					success: res => {
						if (~res.provider.indexOf('paypal') || ~res.provider.indexOf('stripe')) {
							uni.requestPayment({
								provider: payment,
								orderInfo,
								success: success => {},
								fail: fail => {}
							});
						}
					}
				});
				
				uni.hideLoading()
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.CustomPayment {
		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			bottom: -100%;
			left: 0;
			z-index: 99;
			background: rgba(#000, 0.5);
			
			&.show {
				bottom: 0;
			}
		}
		
		.popup {
			width: 100%;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 100;
			transform: translateY(100%);
			transition: all 0.3s;
			overflow: hidden;
			
			&.show {
				transform: translateY(0);
			}
			
			.list {
				width: 100%;
				
				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 40rpx 0;
					border-bottom: 2rpx solid #EAEAEB;
					
					&:last-child {
						border-bottom: none;
						border-top: 8rpx solid #EAEAEB;
					}
					
					.image {
						width: auto;
						height: 40rpx;
						margin-right: 20rpx;
					}
					
					.text {
						color: #000;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>